<script setup>
import { ref } from 'vue'
const emit = defineEmits(['login', 'reset'])
const ruleFormRef = ref(null)
const formData = ref({
  username: '',
  password: ''
})
const rules = ref({
  name: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 10, message: '姓名并不能为空！', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 1, max: 50, message: '密码不能为空', trigger: 'blur' },
  ],
})
const submitForm = async () => {
  if (!ruleFormRef) return
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      emit('login', formData.value)
    }
  })
}
const resetForm = () => {
  formData.value.resetFields()
  emit('reset')
}
</script>
<template>
  <el-form ref="ruleFormRef" style="max-width: 600px" :model="formData" :rules="rules" class="login-form">
    <el-form-item label="请输入账号" prop="username">
      <el-input v-model="formData.username" />
    </el-form-item>
    <el-form-item label="请输入密码" prop="password">
      <el-input v-model="formData.password" />
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="submitForm()">登录</el-button>
      <el-button type="danger" @click="resetForm()">登出</el-button>
    </el-form-item>
  </el-form>
</template>
<style scoped>

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  z-index: 1;
  .el-input {
    height: 40px;
    input {
      height: 40px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}
</style>